<template>
	<view class="page bg-fff">
		<view class="topWrap bg-fff">
			<view class="searchInputWrap border-grey">
				<up-search v-model="keyword" placeholder="请输入关键字搜索" shape="square" :showAction="false" bgColor="#FFFFFF" @change="changeSearch"></up-search>
			</view>
		</view>
		<view class="activeList" v-if="productList.length > 0">
			<view class="activeItem" v-for="item in productList" :key="item.id">
				<active-item :detail="item" @sign="handleSign"></active-item>
			</view>
		</view>

		<up-modal :show="showModel" :showCloseBtn="false" :closeOnClickOverlay="true" @close="handleClose" @confirm="handleSignConfirm">
			<view class="signModal width-100">
				<view class="font15 bottom-3">姓名</view>
				<view>
					<up-input v-model="nameValue" placeholder="请输入姓名" />
				</view>

				<view class="font15 top-10 bottom-3">手机号</view>
				<view>
					<up-input v-model="phoneValue" placeholder="请输入手机号" />
				</view>
			</view>
		</up-modal>

		<up-empty mode="list" v-if="productList.length === 0" marginTop="100"></up-empty>

        <up-gap height="30" />

		<tabbar></tabbar>
	</view>
</template>

<script setup>
import ActiveItem from './components/active-item.vue';
import { ref } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { useUserInfoStore } from '@/store/index';

const userInfoStore = useUserInfoStore();

const keyword = ref('');
let productList = ref([]);

let nameValue = ref('');
let phoneValue = ref('');
let showModel = ref(false);
let signInfo = ref({});

// 页面显示
onShow(() => {
	//延迟1秒再验证验证是否填写上周数据
	setTimeout(async () => {
		await userInfoStore.checkLastWeekVisitData();

		if(userInfoStore.showStatisticsForm) {
			uni.showModal({
				title: '提示',
				showCancel: false,
				content: '检测到您上周未提交到访数据，请及时提交',
				success: (res) => {
					if(res.confirm) {
						uni.navigateTo({
							url: `/pages/my/statistics/form/index?startDate=${userInfoStore.statisticsFormObj.start_time}&endDate=${userInfoStore.statisticsFormObj.end_time}`
						})
					}
				}
			})
		}
	}, 1500)
})

// 页面加载
onLoad(async () => {
	await init();
})

// 初始化
async function init(){
	await userInfoStore.checkUserInfo();//验证用户信息,如果没有就获取并且更新
}

function changeSearch() {
	
}

// 报名
function handleSign(info){
	signInfo.value = info;
	showModel.value = true;
}

// 关闭
function handleClose(){
	signInfo.value = {};
	showModel.value = false;
}

// 报名确认
function handleSignConfirm(){
	if(nameValue.value === '' || phoneValue.value === ''){
		uni.showToast({
			title: '请填写完整信息',
			icon: 'none'
		})
		return;
	}
	showModel.value = false;
}
</script>

<style lang="scss" scoped>
.page{
	min-height: 100vh;
	position: relative;
	border-top: 1px solid #FFFFFF;
	.topWrap{
		position: sticky;
		top: 0;
		z-index: 100;
		padding: 28rpx;
	}
}
</style>